<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo right-menu" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1">
      <div class="block">
        <el-avatar :size="50" :src="headUrl" />
      </div>
    </el-menu-item>
    <el-menu-item index="2">
      <div class="block">
        {{ name }}
      </div>
    </el-menu-item>
    <el-sub-menu index="3">
      <template #title>账户设置</template>
      <el-menu-item index="myMessage">个人中心</el-menu-item>
      <el-menu-item index="exit">退出系统</el-menu-item>
    </el-sub-menu>
  </el-menu>

</template>

<script setup>
import { ref} from "vue";
import headUrl from "@/assets/march.gif";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import axios from "axios";
const router = useRouter()

const name = ref(sessionStorage.getItem("name") || '')

const activeIndex = ref("1");

const handleSelect = (key, keyPath) => {
  if (key === 'myMessage') {
    router.push('/profile')
  }
  if (key === 'exit') {
    loginOut()
  }
  console.log(key, keyPath);
};

const loginOut = async () => {
  try {
    const res = await axios.get('/api/basic/auth/loginOut')

    if (res.data.code === 5200) {
      ElMessage.info('退出系统')
      sessionStorage.clear();
      // 跳转到登录页
      router.push({ name: 'login' })
    } else {
      ElMessage.error("退出登录失败")
    }
  } catch (error) {
    ElMessage.error(error.message)
  }
}

</script>

<style scoped>
.right-menu {
  float: right;
  border-bottom: none !important;
}

:deep(.el-menu-item-group__title) {
  /* 字号：介于一级标题和菜单项之间 */
  font-size: 14px;
  /* 颜色：比一级标题浅但比菜单项深 */
  color: rgba(255, 255, 255, 0.75);
  /* 上间距增大，下间距减小，增强分组感 */
  padding: 16px 0 8px 30px;
  /* 加粗字体 */
  font-weight: 500;
  /* 可选：添加底部虚线分隔线 */
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
  margin-bottom: 8px;
}
</style>